<template>
  <view class="container">
    <!-- 订单状态筛选 -->
    <u-tabs 
      :list="statusList" 
      :current="currentStatus" 
      @change="statusChange"
      bar-width="40"
      active-color="#2979ff"
    ></u-tabs>

    <!-- 订单列表 -->
    <u-list 
      v-if="orderList.length > 0"
      @scrolltolower="loadMore"
      :height="scrollHeight"
    >
      <u-list-item 
        v-for="(item, index) in orderList" 
        :key="item.orderId"
      >
        <u-card 
          :title="`订单号：${item.ordersn}`"
          margin="10rpx 20rpx"
          :border-radius="15"
          box-shadow="0 2px 12px 0 rgba(0,0,0,0.1)"
        >
          <view class="card-content" slot="body">
            <!-- 商品信息 -->
            <view class="goods-item" v-for="goods in item.orderdetailsList" :key="goods.id">
              <u-image 
                :src="baseUrl + goods.goodsimg.split(',')[0]" 
                width="120rpx" 
                height="120rpx"
                border-radius="6"
              ></u-image>
              <view class="goods-info">
                <text class="goods-title">{{  goods.goodsname  }}</text>
              
                <text class="goods-price">¥{{ goods.price }}</text>
              </view>
              <text class="goods-quantity">x{{ goods.quantity }}</text>
            </view>

            <!-- 订单总信息 -->
            <view class="order-footer">
             
              <view class="amount-box">
                <text>实付：</text>
                <u-count-to 
                  :startVal="0" 
                  :endVal="item.amount" 
                  :decimals="2" 
                  separator=","
                  font-size="32"
                  color="#ff4444"
                  bold
                ></u-count-to>
              </view>
            </view>
          </view>

          <!-- 底部操作 -->
          <view class="card-footer" slot="foot">
            <u-tag 
              :text="item.statusText" 
              :type="item.statusType"
              size="mini"
              mode="light"
            />
            <view class="action-btns">
              <u-button 
                v-if="item.afterSaleStatus === 0"
                type="warning" 
                size="mini" 
                plain
                @click="handleAfterSale(item)"
              >申请售后</u-button>
              <u-button 
                type="primary" 
                size="mini" 
                plain
                @click="viewDetail(item.orderId)"
              >查看详情</u-button>
            </view>
          </view>
        </u-card>
      </u-list-item>
    </u-list>

    <!-- 空状态 -->
    <u-empty 
      v-else
      mode="order" 
      icon="http://cdn.uviewui.com/uview/empty/order.png"
      text="暂无支付订单"
    ></u-empty>

    <!-- 加载状态 -->
    <u-loadmore 
      :status="loadStatus" 
      :load-text="loadText"
      margin-top="20"
      margin-bottom="20"
    />
  </view>
</template>

<script>
import { getpaystate } from '../API/order'
import { API_BASE_URL } from '../../utils/appConfig'
	
export default {
  data() {
    return {
      currentStatus: 0, // 当前选中状态
      statusList: [
        { name: '全部', value: 0 },
        { name: '待付款', value: 1 },
        { name: '已支付', value: 2 },
        { name: '已完成', value: 3 }
      ],
      orderList: [],
	  goodsid:[],
      page: 1,
      pageSize: 10,
      total: 0,
	  userid:3,
      loadStatus: 'loadmore',
      scrollHeight: uni.getSystemInfoSync().windowHeight - 50,
	  baseUrl:API_BASE_URL
    }
  },
  computed: {
    loadText() {
      return {
        loadmore: '上拉加载更多',
        loading: '正在加载...',
        nomore: '没有更多了'
      }
    }
  },
  // 	onLoad(options) {
  // 		this.userid = options.userid
		// console.log(this.userid)
		// this.getOrderList()
  		
  // 	},
  mounted() {
  	this.getOrderList()
  },
  methods: {
    // 获取订单列表
    getOrderList() {
			getpaystate(this.userid).then(res =>{
				this.orderList = res.data
				console.log(res.data.orderdetailsList)
			})
			
			
			
			
			
    },

    // 状态筛选
    statusChange(index) {
      this.currentStatus = index
      this.page = 1
      this.orderList = []
      this.getOrderList()
    },

    // 加载更多
    loadMore() {
      if (this.loadStatus !== 'nomore') {
        this.page++
        this.loadStatus = 'loading'
        this.getOrderList()
      }
    },

    // 查看订单详情
    viewDetail(orderId) {
      uni.navigateTo({
        url: `/pages/order/detail?id=${orderId}`
      })
    },

    // 申请售后
    handleAfterSale(item) {
      uni.navigateTo({
        url: `/pages/after-sale/apply?orderId=${item.orderId}`
      })
    }
  }
}
</script>

<style  scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.card-content {
  padding: 20rpx 0;

  .goods-item {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    .goods-info {
      flex: 1;
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;

      .goods-title {
        font-size: 28rpx;
        color: #333;
        @include u-line-2;
      }

      .goods-spec {
        font-size: 24rpx;
        color: #999;
        margin: 10rpx 0;
      }

      .goods-price {
        color: #ff4444;
        font-size: 28rpx;
      }
    }

    .goods-quantity {
      color: #666;
      font-size: 26rpx;
    }
  }

  .order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20rpx;

    .amount-box {
      display: flex;
      align-items: baseline;
    }
  }
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0 0;

  .action-btns {
    > button {
      margin-left: 20rpx;
    }
  }
}
</style>